<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyJPetStore</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
</head>
<body>
<header th:replace="common/top"></header>

<div id="Content">
    <div id="BackLink">
        <a th:href="@{'/catalog/main'}">Return to Main Menu</a>
    </div>

    <div id="Catalog">

        <table>
            <tr>
                <th align="center" colspan="2">Order #<label th:text="${order.orderId}">Order ID</label>
                    <label th:text="${#dates.format(order.orderDate,'yyyy/MM/dd hh:mm:ss')}"></label>
                            <!--th:text="${#dates.format(${order.orderDate},'yyyy/MM/dd hh:mm:ss')}"-->
                </th>
            </tr>
            <tr>
                <th colspan="2">Payment Details</th>
            </tr>
            <tr>
                <td>Card Type:</td>
                <td>
                    <label th:text="${order.cardType}"></label>
                </td>
            </tr>
            <tr>
                <td>Card Number:</td>
                <td>
                    <label th:text="${order.creditCard}"></label> * Fake number!
                </td>
            </tr>
            <tr>
                <td>Expiry Date (yyyy/MM/dd):</td>
                <td>
                    <label th:text="${order.expiryDate}"></label>
                </td>
            </tr>
            <tr>
                <th colspan="2">Billing Address</th>
            </tr>
            <tr>
                <td>First name:</td>
                <td>
                    <label th:text="${order.billToFirstName}"></label>
                </td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td>
                    <label th:text="${order.billToLastName}"></label>
                </td>
            </tr>
            <tr>
                <td>Address 1:</td>
                <td>
                    <label th:text="${order.billAddress1}"></label>
                </td>
            </tr>
            <tr>
                <td>Address 2:</td>
                <td>
                    <label th:text="${order.billAddress2}"></label>
                </td>
            </tr>
            <tr>
                <td>City:</td>
                <td>
                    <label th:text="${order.billCity}"></label>
                </td>
            </tr>
            <tr>
                <td>State:</td>
                <td>
                    <label th:text="${order.billState}"></label>
                </td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td>
                    <label th:text="${order.billZip}"></label>
                </td>
            </tr>
            <tr>
                <td>Country:</td>
                <td>
                    <label th:text="${order.billCountry}"></label>
                </td>
            </tr>
            <tr>
                <th colspan="2">Shipping Address</th>
            </tr>
            <tr>
                <td>First name:</td>
                <td>
                    <label th:text="${order.shipToFirstName}"></label>
                </td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td>
                    <label th:text="${order.shipToLastName}"></label>
                </td>
            </tr>
            <tr>
                <td>Address 1:</td>
                <td>
                    <label th:text="${order.shipAddress1}"></label>
                </td>
            </tr>
            <tr>
                <td>Address 2:</td>
                <td>
                    <label th:text="${order.shipAddress2}"></label>
                </td>
            </tr>
            <tr>
                <td>City:</td>
                <td>
                    <label th:text="${order.shipCity}"></label>
                </td>
            </tr>
            <tr>
                <td>State:</td>
                <td>
                    <label th:text="${order.shipState}"></label>
                </td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td>
                    <label th:text="${order.shipZip}"></label>
                </td>
            </tr>
            <tr>
                <td>Country:</td>
                <td>
                    <label th:text="${order.shipCountry}"></label>
                </td>
            </tr>
            <tr>
                <td>Courier:</td>
                <td>
                    <label th:text="${order.courier}"></label>
                </td>
            </tr>
            <tr>
                <td colspan="2">Status:
                    <label th:text="${order.status}"></label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <table>
                        <tr>
                            <th>Item ID</th>
                            <th>Description</th>
                            <th>Quantity</th>
                            <th>Price</th>
                            <th>Total Cost</th>
                        </tr>
                        <tr th:each="lineItem:${order.lineItems}">
                            <td>
                                <a href="#" th:text="${lineItem.item.itemId}">Item ID</a>
                            </td>
                            <td>
                                <label th:if="${lineItem.item != null}"
                                       th:text="${lineItem.item.attribute1} + ${lineItem.item.product.name}"></label>
                                <i th:if="${lineItem.item == null}">{description unavailable}</i>
                            </td>

                            <td th:text="${lineItem.quantity}">Quantity</td>
                            <td>
                                <label th:text="${#numbers.formatDecimal(lineItem.unitPrice,1,2)}"></label>
                            </td>
                            <td>
                                <label th:text="${#numbers.formatDecimal(lineItem.total,1,2)}"></label>
                            </td>
                        </tr>
                        <tr>
                            <th colspan="5">Total:
                                <label th:text="${#numbers.formatDecimal(order.totalPrice,1,2)}"></label>
                            </th>
                        </tr>
                    </table>
                </td>
            </tr>

        </table>

    </div>

</div>

<footer th:replace="common/bottom"></footer>
</body>
</html>